@function getRemNum($rem) {
  @return ($rem /37.5)
}

@import "loginImport";

header {
  width: getRemNum(375rem - 60rem);
  height: getRemNum(165rem);
  margin: getRemNum(68rem - 44rem) auto 0;
  font-family: PingFangSC-Medium, PingFang SC;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .name-image {
    width: getRemNum(51rem);
    height: getRemNum(54rem);
    border-radius: getRemNum(12rem);
    background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/%E5%A4%B4%E5%83%8F%403x.png") no-repeat;
    background-size: cover;
  }

  & :nth-child(2) {
    color: #333;
    font-size: getRemNum(42rem);
    font-weight: bold;
  }

  & :nth-child(3) {
    color: #999999;
    font-size: getRemNum(20rem);
  }
}

.container {
  height: getRemNum(334rem);
  width: getRemNum(315rem);
  margin: getRemNum(44rem) auto 0;

  form {
    height: getRemNum(334rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .account-id, .account-password {
    position: relative;
    font-family: PingFangSC-Regular, PingFang SC;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .account-id-icon, .account-password-icon {
      width: getRemNum(38rem);
      height: getRemNum(48rem);
      background-size: contain !important;
    }

    .account-id-icon {
      background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/Account%403x.png") no-repeat;
    }

    .account-password-icon {
      background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/password%403x.png") no-repeat;
    }

    input::-webkit-input-placeholder {
      color: #D8D8D8;
      letter-spacing: getRemNum(0.6rem);
    }

    input {
      font-family: PingFangSC-Regular, PingFang SC;
      height: getRemNum(20rem + 32rem);
      width: getRemNum(259rem);
      color: #757575;
      outline: none;
      font-size: getRemNum(16rem);
      border: {
        top: none;
        left: none;
        right: none;
        bottom: rgba(0, 0, 0, 0.05) solid getRemNum(2rem);
      }
    }
  }

  .submit-button {
    width: getRemNum(315rem);
    height: getRemNum(58rem);

    input {
      width: getRemNum(315rem);
      height: getRemNum(58rem);
      background: linear-gradient(135deg, #4279FD 0%, #89B1FF 100%);
      box-shadow: 0 getRemNum(5rem) getRemNum(12rem) 0 rgba(0, 0, 0, 0.08);
      border-radius: getRemNum(12rem);
      border: none;
      color: #fff;
      font-size: getRemNum(16rem);
      font-family: PingFangSC-Medium, PingFang SC;
    }
  }

  .other-login {
    display: flex;
    justify-content: space-between;
    margin-top: getRemNum(-10rem);

    a {
      font-family: PingFangSC-Regular, PingFang SC;
      color: #999999;
      font-size: getRemNum(14rem);
    }
  }

  .other-login-operation {
    display: flex;
    justify-content: space-between;

    input {
      width: getRemNum(142rem);
      height: getRemNum(58rem);
      box-shadow: 0 getRemNum(5rem) getRemNum(12rem) 0 rgba(0, 0, 0, 0.08);
      border-radius: getRemNum(12rem);
      border: none;
      color: #fff;
      font-family: PingFangSC-Medium, PingFang SC;
      font-size: getRemNum(16rem);
    }

    & a:nth-child(1) input {
      background: #FFC542;
    }

    & a:nth-child(2) input {
      background: #3FDA9B;
    }
  }
}


footer {
  position: relative;
  bottom: getRemNum(-60rem);
  left: 50%;
  transform: translate(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-size: getRemNum(11rem);
  font-family: PingFangSC-Regular, PingFang SC;
  color: #999999;
  white-space: nowrap;
  width: 100%;
  height: getRemNum(30rem);
  background: #fff;

  section {
    display: flex;
  }

  section > section {
    width: getRemNum(13rem);
    height: getRemNum(13rem);
    background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/Record%403x.png") no-repeat;
    background-size: contain;
  }
}